<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理器</title>
</head>
<body>
    <!-- 1、页面结构 -->
     <h2>任务管理器</h2>
     <input type="text" id="taskInput" placeholder="请输入任务">
     <button id="addBtn">添加任务</button>
     <ul id="taskList"></ul>
     <script>
//点击按钮之后，把输入框的数据添加到数组中，并使用数据更新列表

        // 2、获取元素
        var taskInput = document.getElementById("taskInput");
        var addBtn = document.getElementById("addBtn");
        var taskList = document.getElementById("taskList");
        // 3、初始化数据
        var tasks = [];
        //  4、添加事件监听器
        addBtn.addEventListener("click",addTask);
        // 5、添加任务
        function addTask(){
            //通过输入框对象获取输入的数据
            // trim()方法用于去除字符串两端的空格
            var tastText=taskInput.value.trim();
            // 创建自定义对象，存储任务数据
            var task={
                text:tastText,
                created:new Date(),  //通过new Date()获取当前时间
                completed:false
            }
            tasks.push(task); //把任务数据添加到数组中
            alert("任务已添加");
            alert("当前添加的任务是："+tasks[tasks.length-1].text); //如何从tasks数组里面取最后一个数据
            // 6、更新列表
            updateList();
        }
        function updateList(){
            // 7、清空列表
            taskList.innerHTML="";
            // 8、遍历数组，创建li元素，并添加到列表中
            for(var i=0;i<tasks.length;i++){
                var task=tasks[i];
                var li=document.createElement("li");
                li.innerHTML=`
                        <span>${task.text}</span>
                        <small>${task.created.toLocaleString()}</small> 
                        `;
                taskList.appendChild(li);
            }
        }

     </script>
</body>
</html>
<!-- 学习了本地对象、宿主对象、自定义对象 -->
 <!-- 1、处理任务完成和删除 -->
  <!-- 2、如何显示任务统计信息 -->
   <!-- 3、如何排序 -->